<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
        }

        .header{
            text-align: center;
        }

        .h{
            font-weight: 100;
            font-size: 80px;
            background: #E9ECEF;
            color: #212529;
            padding-top: 50px;
        }
        .hh{
            font-weight: 100;
            font-size: 15px;
            background: #E9ECEF;
            color: #212529;
            padding-bottom: 50px;
        }

        .btn{
            background: #5AAAFF;
            color: #fff;
            padding: 15px 50px;
            border-radius: 5px;
        }

        .mian{
            text-align: center;
            margin-top: 30px;
        }

        .but{
            background: #fff;
            color: #212529;
            padding: 15px 50px;
            border-radius: 5px;
        }
        .buttons{
            background: #6C757D;
            border: 0;
            border-radius: 5px;
            padding: 15px 120px;
            color: #fff;
            outline: none;
            margin-right: 78px;
            margin-left: 78px;
        }
        .wenben{
            text-align: center;
            margin-top: 30px;
        }
        .p,
        .q{
            padding: 10px;
        }
        .footer{
            margin-top: 50px;
        }
        .foor{
            background: #5AAAFF;
            color: #fff;
            padding: 15px 80px;
            outline: none;
            border-radius: 5px;
            margin-left: 197px;
        }
        .p{
            background: #E9ECEF;
        }
    </style>
    <meta charset="UTF-8">
    <title>翻译</title>
</head>

<body>
<div class="header">
    <div class="container">
        <h2 class="h">翻译</h2>
        <h5 class="hh">中英互译</h5>
    </div>
</div>

<div class="mian">
    <div class="container">
        <a href="" class="btn" id="y">中文</a>
        <a href="" class="but" id="e">英语</a>
        <button class="buttons" onclick="dj()">↔</button>
        <a href="" class="btn" id="s">英语</a>
        <a href="" class="but" id="si">中文</a>
    </div>
</div>

<div class="wenben">
    <div class="container">
        <textarea name="" rows="8" cols="63" class="q"></textarea>
        <textarea name="" rows="8" cols="63" class="p">翻译</textarea>
    </div>
</div>

<div class="footer">
    <div class="container">
        <a class="foor" onclick="fc()">翻译</a>
    </div>
</div>
<script>
    //中文
    var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
    //英语
    var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];

    var txt1 = document.querySelector('.q');
    var txt2 = document.querySelector('.p');
    var a = 'aa';


    function fc() {
//可以翻译，代表数据库有可以翻译的。
        var lan = true;

        for(var i = 0; i < data_zh.length; i++) {
            if(txt1.value == data_zh[i]) {
                txt2.value = data_en[i]
                if(a=='bb'){
                    dj()
                }
                lan = false;
            }
        }


        for(var i = 0; i < data_zh.length; i++) {
            if(txt1.value == data_en[i]) {
                txt2.value = data_zh[i]
                if(a=='aa'){
                    dj()
                }
                lan = false;
            }
        }


        if(lan){
            alert("无法翻译")
        }
    }




    var zhuan = document.querySelector('.buttons');
    var rw = document.querySelector('#y');
    var ra = document.querySelector('#e');
    var rw1 = document.querySelector('#s');
    var ra1 = document.querySelector('#si');

    function dj(){
        if(a == 'aa'){
            rw.className ='but';
            ra.className ='btn';
            rw1.className ='but';
            ra1.className ='btn';
            a='bb';
        }else if(a =='bb'){
            rw.className ='btn';
            ra.className ='but';
            rw1.className ='btn';
            ra1.className ='but';
            a='aa';
        }
    }
</script>
</body>
</html>